<template>
  <div class="flex flex-col justify-center items-center pt-30px pb-50px">
    <svg-icon size="80px" icon-class="checkbox-circle-fill" class="text-green-500 mb-10px"></svg-icon>
    <div class="text-center text-18px text-gray-500 font-bold">恭喜，提交成功</div>
    <div class="text-center text-12px text-#999 mt-15px">产品提交成功，审核中...</div>
    <div class="text-center text-gray-500 pt-30px">
      <el-button type="primary" @click="handleContinue">继续填加产品</el-button>
      <!-- <el-button @click="handlePure">继续设置关键词</el-button> -->
      <el-button @click="handleToManage">返回产品管理</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
const router = useRouter()

const props = defineProps<{
  modelValue: number
}>()

// 使用 computed + watch 实现双向绑定效果
const step = ref(props.modelValue)

watch(
  () => props.modelValue,
  (newVal) => {
    if (typeof newVal === 'number') {
      step.value = newVal
    }
  }
)

const emit = defineEmits<{
  (e: 'update:modelValue', value: number): void
}>()

function handlePure() {
  const newStep = step.value
  step.value = newStep
  emit('update:modelValue', newStep)
}

function handleContinue() {
  emit('update:modelValue', 0)
}

function handleToManage() {
  router.push({
    path: '/b2b/product/list',
    query: {
      index: 1
    }
  })
}
</script>

<style scoped></style>